<!-- 自定义底部导航栏 -->
<template>
	<view class="container">
		<view class="tabbar-item" :class="[item.centerItem ? ' center-item' : '']"
			:style="'width: calc(60% /' + tabbarList.length + ')'" @click="changeItem(item)"
			v-for="(item, i) in tabbarList" :key="i">
      <view v-if="item.id !== 1">
        <view class="item-top">
          <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
        </view>
        <view class="item-bottom" :class="[curItem === item.id ? 'item-active' : '']">{{ item.text }}</view>
      </view>
      <view v-else>
        <view class="item-top">
          <image :src="currentType === 1 ? '/static/tabbar/fuel-code.png' : '/static/tabbar/scan-charge.png'" />
        </view>
      </view>
		</view>
	</view>
</template>

<script>
	import {
		chargeAuth,
		getGunOrStationInfo
	} from '@/api/index'
	import {
		toast
	} from '@/utils/common'
	export default {
		props: {
			/* 当前导航栏 */
			currPage: {
				type: Number,
				default: 0
			},
			isShow: {
				type: Boolean,
				default: true
			},
      currentType: {
        type: Number,
        // default: 1
      }
		},
		data() {
			return {
				curItem: 0, // 当前所选导航栏
				// isShow:null
				tabbarList: [{
          id: 0,
          pagePath: "/pages/index/index",
          iconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/home-1.png",
          selectedIconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/home-2.png",
          text: "首页",
          centerItem: false
        },
        {
          id: 1,
          pagePath: "/pages/personal-center/fuel-code/index",
          iconPath: this.currentType === 1 ? '/static/tabbar/fuel-code.png' : '/static/tabbar/scan-charge.png',
          selectedIconPath: this.currentType ? '/static/tabbar/fuel-code.png' : '/static/tabbar/scan-charge.png',
          text: "",
          centerItem: this.isShow,
          flag:true
        },
        {
          id: 2,
          pagePath: "/pages/personal-center/index",
          iconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/Personal-center-1.png",
          selectedIconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/Personal-center-2.png",
          text: "我的",
          centerItem: false
        }], // 导航栏列表
				tabbarList1: [{
						id: 0,
						pagePath: "/pages/index/index",
						iconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/home-1.png",
						selectedIconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/home-2.png",
						text: "首页",
						centerItem: false
					},
					{
						id: 1,
						pagePath: "",
						iconPath: this.isShow ? '/static/tabbar/scan-charge.png' : '',
						selectedIconPath: this.isShow ? '/static/tabbar/scan-charge.png' : '',
						text: "",
						centerItem: this.isShow,
						flag:true
					},
					{
						id: 2,
						pagePath: "/pages/personal-center/index",
						iconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/Personal-center-1.png",
						selectedIconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/Personal-center-2.png",
						text: "我的",
						centerItem: false
					}
				],
				tabbarList2: [{
						id: 0,
						pagePath: "/pages/index/index",
						iconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/home-1.png",
						selectedIconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/home-2.png",
						text: "首页",
						centerItem: false
					},
					{
						id: 1,
						pagePath: "/pages/personal-center/fuel-code/index",
						iconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/fuel-code.png",
						selectedIconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/fuel-code.png",
						text: "",
						centerItem: true
					},
					{
						id: 2,
						pagePath: "/pages/personal-center/index",
						iconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/Personal-center-1.png",
						selectedIconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/Personal-center-2.png",
						text: "我的",
						centerItem: false
					}
				],
				tabbarList3: [{
						id: 0,
						pagePath: "/pages/index/index",
						iconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/home-1.png",
						selectedIconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/home-2.png",
						text: "首页",
						centerItem: false
					},
          {
              id: 1,
              pagePath: "",
              iconPath: this.isShow ? '/static/tabbar/scan-charge.png' : '',
              selectedIconPath: this.isShow ? '/static/tabbar/scan-charge.png' : '',
              text: "",
              centerItem: this.isShow,
              flag:true
          },
					// {
					// 	id: 1,
					// 	pagePath: "",
					// 	iconPath: '',
					// 	selectedIconPath: '',
					// 	text: "",
					// 	centerItem: ''
					// },
					{
						id: 2,
						pagePath: "/pages/personal-center/index",
						iconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/Personal-center-1.png",
						selectedIconPath: "http://wx.xiongmaovip.com/miniapp/static/tabbar/Personal-center-2.png",
						text: "我的",
						centerItem: false
					}
				],
			};
		},
		mounted() {
			this.curItem = this.currPage; // 当前所选导航栏
			let FUELORCHARGE = uni.getStorageSync('FUELORCHARGE')
			let FUELCODE = uni.getStorageSync('FUELCODE')
			let INDEX = uni.getStorageSync('INDEX')
			// if (FUELORCHARGE == 1 && !FUELCODE) {
      //   console.log('加油tabbarList2')
			// 	this.tabbarList = this.tabbarList2
			// } else if (FUELORCHARGE == 2 && !FUELCODE) {
      //   console.log('充电tabbarList1')
			// 	this.tabbarList = this.tabbarList1
			// } else if ((FUELCODE || INDEX && !FUELORCHARGE)) {
      //   console.log('3')
			// 	this.tabbarList = this.tabbarList3
			// }
			// #ifdef H5
			uni.hideTabBar(); // 隐藏 tabBar 导航栏
			// #endif
		},
		methods: {
			// 获取枪的详情
			getChargeNozExtInfo(connectorId) {
				getGunOrStationInfo({
					connectorId: connectorId, // 充电接口ID
				}).then(res => {
					console.log(res, 'getGunOrStationInfo')
					const nozExtInfo = res.nozExt
					const stationInfo = res.station
					if (nozExtInfo.connectorStatus == 3) { // 充电中
						const userOpenId = uni.getStorageSync('userOpenId')
						if (nozExtInfo.openid == userOpenId) {
							uni.navigateTo({
								url: '/pages/panda-charge/close-charge/index?connectorId=' + connectorId +
									'&startChargeSeq=' + nozExtInfo.startChargeSeq
							})
						} else {
							toast('当前油枪他人正在充电')
						}
					} else {
						uni.navigateTo({
							url: '/pages/panda-charge/confirm-charge/index?connectorId=' + connectorId +
								'&stationId=' + stationInfo.stationId
						})
					}
				}).catch(error => {
					console.log(error)
				})
			},
			// 吊起扫码API(H5无效)
			scanCodeFn() {
				const _this = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if (res.result) {
							const scanUrl = res.result
							if(scanUrl.match(/connectorId=(\S*)&stationId=/)){
								let str = scanUrl.match(/connectorId=(\S*)&stationId=/)[1]
								_this.getChargeNozExtInfo(str)
								return
							}
							let strVal = scanUrl.split('.')[0]
							const startIndex = strVal.lastIndexOf('//')
							const endIndex = strVal.length
							const connectorId = strVal.substr(startIndex + 2, endIndex)
							_this.getChargeNozExtInfo(connectorId)
						}
					}
				})
			},
			/* 导航栏切换 */
			changeItem(e) {
				console.log(e);
				// 中间凸起按钮
				if (e.id === 2) uni.setStorageSync('FUELCODE', 1)
				let FUELORCHARGE = uni.getStorageSync('FUELORCHARGE')
				if (e.id === 1 && this.currentType === 2) {
					this.scanCodeFn()
					return;
				}
				if (e.id === 0) {
					uni.removeStorageSync('FUELCODE')
				}
				// if (FUELORCHARGE && (e.pagePath === '/pages/panda-charge/index' || e.pagePath === '/pages/panda-fuel/index')) {
				// 	if (FUELORCHARGE === 1) {
				// 		e.pagePath = '/pages/panda-fuel/index'
				// 	} else if (FUELORCHARGE === 2) {
				// 		e.pagePath = '/pages/panda-charge/index'
				// 	}
				// }
				if (!e.pagePath) return
				uni.switchTab({
					url: e.pagePath
				}); // 跳转到其他 tab 页面
			}
		}
	};
</script>

<style lang="scss" scoped>
	$textDefaultColor: #6A6A6A; // 文字默认颜色
	$bottomBg: #fff; // 底部背景
	$textSelectedColor: #1B1B1B; // 文字选中颜色
	$centerItemBg: #fff; // 中间凸起按钮背景

	.container {
    box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 140rpx;
		color: $textDefaultColor;
		padding: 5rpx 64upx;
		background-color: $bottomBg;
		box-shadow: 0 0 10rpx #999;
		justify-content: space-around;
        border-radius: 40upx 40upx 0 0 ;
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 90rpx;

		.item-top {
			flex-shrink: 0;
			width: 52rpx;
			height: 52rpx;
			padding: 4rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.item-bottom {
			line-height: 40rpx;
			width: 100%;
			font-size: 24rpx;
		}

		.item-active {
			color: $textSelectedColor;
		}
	}

	.center-item {
		position: relative;

		.item-top {
			position: absolute;
			top: -55rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
		}

		.item-bottom {
			position: absolute;
			bottom: 5rpx;
		}
	}
</style>